<template name="用户登录日志查询">
  <base-view :model="query" @submit="search">
    <template v-slot:params>
      <a-col span="8">
        <a-form-model-item label="用户账号">
          <a-input
            placeholder="请输入用户账号"
            class="select"
            v-model="query.authUid"
          />
        </a-form-model-item>
      </a-col>
      <!-- <a-row type="flex" justify="center">
        <a-col>
          <a-form-item>
            <a-button type="primary">搜索</a-button>
          </a-form-item>
        </a-col>
      </a-row> -->
    </template>
    <div class="section">
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :loading="loading"
        :pagination="pagination"
        @change="search"
        @showSizeChange="search"
        :scroll="{ x: 2000 }"
      ></a-table>
    </div>
  </base-view>
</template>

<script>
export default {
  name: "UserLogonLog",
  data() {
    return {
      query: {
        authUid: "",
      },
      beanInfo: {},
      operationType: "view",
      loading: false,
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "法人行号",
          dataIndex: "instId",
          fixed: "left",
          width: 120,
        },
        {
          title: "登录账号",
          dataIndex: "authGuid",
          width: 120,
        },
        {
          title: "登录时间",
          dataIndex: "logonTime",
          width: 180,
        },
        {
          title: "登出时间",
          dataIndex: "logoutTime",
          width: 120,
        },
        {
          title: "登录时长",
          dataIndex: "logonTimeLengthFriendly",
          width: 120,
        },
        {
          title: "登录次数",
          dataIndex: "logonTimes",
          width: 120,
        },
        {
          title: "xforwardFor(原始客户端地址)",
          dataIndex: "xforwardFor",
          width: 220,
        },
        {
          title: "remoteAddr(远程机器地址或代理地址)",
          dataIndex: "remoteAddr",
          width: 220,
        },
      ],
      dataSource: [],
    };
  },
  methods: {
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/aud/user-logon-log/list", {
          instId: this.query.instId,
          authUid: this.query.authUid,
          pageNum: this.pagination.defaultCurrent,
          pageSize: this.pagination.defaultPageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },

    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },
  },
  mounted() {
    this.search();
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../../static/less/Common";
</style>
